<template>
	<Layout icon="home">
		<template #title>支付失败</template>
		<view class="inline-flex fill aic column pay-failed">
			<image src="/static/image/other/pay.failed.png"></image>
			<text>支付失败,请重新支付</text>
			<view class="pay-failed__action">
				<u-button :custom-style="{width:'332rpx'}" type="primary" plain size="submajor"
					@click="tapPay">重新支付</u-button>
			</view>
		</view>
	</Layout>
</template>

<script setup lang="ts">
	import Layout from '@/components/layout/layout.vue';
	import { onLoad } from '@dcloudio/uni-app';
	let storeDataKey = '';
	let storeMsgKey = '';
	onLoad((option) => {
		option = option as { storeKey : string; };
		storeDataKey = `${option.storeKey}data`;
		storeMsgKey = `${option.storeKey}msg`;
	});

	function tapPay() {
		const paymentData = JSON.parse(uni.getStorageSync(storeDataKey));
		const msg = uni.getStorageSync(storeMsgKey) ?? '';
		wx.requestPayment({
			...paymentData,
			success: () => {
				uni.navigateTo({
					url: `/pages-other/pay-success/pay-success?msg=${msg}`
				});
			},
			fail: (err : any) => {
				console.log(err);
				uni.showToast({
					icon: 'none',
					title: '您已取消支付'
				});
			}
		} as any
		);
	}
</script>

<style lang="scss">
	.pay-failed {
		padding-top: 170rpx;

		image {
			width: 120rpx;
			height: 119rpx;
		}

		text {
			margin-top: 60rpx;
			color: #000000;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 36rpx;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}

		&__action {
			margin-top: 112rpx;
		}
	}
</style>